<template>
    <div :ref="`dynamicsLineChart${id}`" class="dynamics-line-chart"></div>
</template>

<script>
import commonMixin from '@/utils/mixin'
import moment from 'moment'
export default {
  name: 'dynamicsLineChart',
  mixins: [commonMixin],
  props: {
    id: {
      type: [Number, String],
      default: 1
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      currentMonth: 1,
      i: 1,
      salvProName: [
        '安徽省',
        '河南省',
        '浙江省',
        '湖北省',
        '贵州省',
        '江西省',
        '江苏省',
        '四川省',
        '云南省',
        '湖南省'
      ],
      resDebounce: null, // 防抖
      chart: null, // chart实例,
      listData: []
    }
  },
  mounted() {
    this.listData = this.createDate()
    this.initChart()
    setInterval(() => {
      this.run()
      this.i++
      if (this.i === 365) {
        this.i = 0
      }
    }, 1000)
  },
  methods: {
    createDate() {
      return this.salvProName.map((v, index) => {
        return {
          name: v,
          value: this.getDaysOfYear(2023).map((item, i) => {
            return {
              time: item,
              value: i === 3 && index === 3 ? 1000 : i * (index + 1)
            }
          })
        }
      })
    },
    getDaysOfYear(year) {
      const days = []
      const startDate = moment(`${year}-01-01`)
      const endDate = moment(`${year}-12-31`)

      while (startDate.isSameOrBefore(endDate)) {
        days.push(startDate.format('YYYY-MM-DD'))
        startDate.add(1, 'days')
      }

      return days
    },

    // 初始化
    initChart() {
      this.chart = this.$echarts.init(this.$refs[`dynamicsLineChart${this.id}`])
      const option = this.getOption()
      this.chart.setOption(option)
      this.resDebounce = this.debounce(this.chart.resize, 300)
      window.addEventListener('resize', this.resDebounce)
    },
    // 自定义配置
    getOption(options = {}) {
      const data = this.listData.map(item => item.value).map(item => item[this.i]).map(item => item.value)
      const option = {
        title: {
          show: false
        },
        legend: {
          show: false
        },
        xAxis: {
          max: 'dataMax',
          show: false
        },
        grid: {
          left: '15%'
        },
        yAxis: {
          offset: 0,
          show: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          type: 'category',
          data: this.listData.map(item => { return item.name }),
          axisLabel: {
            show: true,
            // align: 'left',
            textStyle: {
              fontSize: 14,
              color: '#333',
              rich: {
                img1: {
                  // 这里的warnValue对应上面的标签名
                  width: 30,
                  height: 30,
                  align: 'center',
                  color: 'red',
                  backgroundColor: {
                    image: require('../../../assets/images/1.png')// 这个warnImg是上面定义的图片var warnImg = "img/warn.png";
                  }
                },
                img2: {
                  // 这里的warnValue对应上面的标签名
                  width: 30,
                  height: 30,
                  color: 'blue',
                  align: 'center',
                  backgroundColor: {
                    image: require('../../../assets/images/2.jpg')// 这个warnImg是上面定义的图片var warnImg = "img/warn.png";
                  }
                },
                index: {
                  color: '#9d9d9d',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index1: {
                  color: '#f8777b',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index2: {
                  color: '#ffa145',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                index3: {
                  color: '#6ade8d',
                  fontWeight: 'bold',
                  fontStyle: 'italic'
                },
                name: {
                  width: 7 * 14,
                  align: 'left',
                  textAlign: 'left'
                }
              }
            },
            formatter: (value, index) => {
              console.log(value, index)
              return `{img${index + 1}|${index + 1}}{text|${value}}`
            }
          },
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4 // only the largest 3 bars will be displayed
        },
        series: [
          {
            name: '背景',
            type: 'bar',
            // barWidth: 30,
            barGap: '-100%',
            data: this.listData.map(item => { return item.name }),
            itemStyle: {
              borderRadius: [0, 30, 30, 0],
              borderCap: 'round',
              color: '#ededed'
              // barBorderRadius: 30
            },
            animationDurationUpdate: 0
          },
          {
            realtimeSort: true,
            name: 'X',
            type: 'bar',
            data,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            },

            labelLine: {
              show: false,
              lineStyle: {

              }
            },
            itemStyle: {
              borderRadius: [0, 30, 30, 0],
              borderCap: 'round'
            }
          }

        ],
        animationDuration: 0,
        animationDurationUpdate: 1000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }
      return option
    },

    run() {
      const data = this.listData.map(item => item.value).map(item => item[this.i])

      this.currentMonth = moment(new Date(data[0].time)).month() + 1
      this.chart.setOption({
        // yAxis: {
        //   data: yData
        // },
        series: [
          {
            name: 'X',
            type: 'bar',
            data
          },
          {
            name: '背景',
            type: 'bar',
            data: new Array(data.length).fill(Math.max(...data.map(item => { return item.value })))
          }
        ]
      })
    }
  },
  destroyed() {
    // 防止内存泄露
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    window.addEventListener('resize', this.resDebounce)
  }
}
</script>

<style lang="less" scoped>
.dynamics-line-chart {
  position: relative;
  width: 50vw;
  height: 50vh;
  z-index: 1000;
  background: #fff;
}
</style>
